<template>
	<div class="auditing">
		<el-breadcrumb class="leP1" separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/' }">考勤</el-breadcrumb-item>
		  <el-breadcrumb-item>审核</el-breadcrumb-item>
		</el-breadcrumb>
		<div id="box">
			<ul class="boxUl">
				<li :class="{auActive:0==num}" @click="num=0">用户审核</li>
				<li :class="{auActive:1==num}" @click="num=1">用户记录</li>
			</ul>
			<section>
				<!--用户审核开始-->
				<div v-show="num==0" class="boxCheck">
					<el-table
					    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
					    style="width: 100%">
					    <el-table-column label="姓名" prop="date"></el-table-column>
					    <el-table-column label="起始日期" prop="name"></el-table-column>
					    <!--<el-table-column label="结束日期" prop="date"></el-table-column>-->
					    <el-table-column label="总计/天" prop="name"></el-table-column>
					    <el-table-column label="原因" prop="name"></el-table-column>
					    <el-table-column align="right">
					      <template slot="header" slot-scope="scope">
					        <el-input
					          v-model="search"
					          size="mini"
					          placeholder="输入关键字搜索"/>
					      </template>
					      <template slot-scope="scope">
					      	<el-button type="success" icon="el-icon-check" circle></el-button>
					      	<el-button type="danger" icon="el-icon-delete" circle></el-button>
					        <!--<el-button
					          size="mini"
					          @click="handleEdit(scope.$index, scope.row)">agree</el-button>-->
					        <!--<el-button
					          size="mini"
					          type="danger"
					          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
					      </template>
					    </el-table-column>
					</el-table>
					<div class="block">
					    <!--<span class="demonstration">直接前往</span>-->
					    <el-pagination
					      @size-change="handleSizeChange"
					      @current-change="handleCurrentChange"
					      :current-page.sync="currentPage3"
					      :page-size="100"
					      layout="prev, pager, next, jumper"
					      :total="1000">
					    </el-pagination>
					</div>
				</div>
				<!--用户审核结束-->
				<!--用户记录开始-->
				<div v-show="num==1" class="history">
				  <el-table				  	
				    :data="tableData2.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
				    style="width: 100%">
				    <el-table-column label="姓名" prop="name"></el-table-column>
				    <el-table-column label="起始日期" prop="date1"></el-table-column>
				    <el-table-column label="结束日期" prop="date2"></el-table-column>
				    <el-table-column label="总计/天" prop="day"></el-table-column>
				    <el-table-column label="状态" prop="situation"></el-table-column>
				    <el-table-column align="right">
				      <template slot="header" slot-scope="scope">
				        <el-input
				          v-model="search"
				          size="mini"
				          placeholder="输入关键字搜索"/>
				      </template>
				      <template slot-scope="scope">				      	
				        <el-button
				          v-show="'放假中'==scope.row.situation"
				          size="mini"
				          @click="handleEdit(scope.$index, scope.row)">销假</el-button>
				        <el-button
				          size="mini"
				          type="danger"
				          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				      </template>
				    </el-table-column>				    
				  </el-table>
				  <!--分页开始-->
				  <div class="block">
				    <!--<span class="demonstration">直接前往</span>-->
				    <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page.sync="currentPage3"
				      :page-size="100"
				      layout="prev, pager, next, jumper"
				      :total="1000">
				    </el-pagination>
				 </div>
				 <!--分页结束-->
				</div>
				<!--用户记录结束-->
			</section>
		</div>
	</div>
</template>

<script>
  export default {
    data() {
      return {
        num:0,
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        search: '',
        tableData2: [
	        {
	          name: '王小虎',
	          date1: '2016-05-02',
	          date2: '2016-05-02',
	          day: 2,
	          situation:'放假中'
	        },
	        {
	          name: '王小虎',
	          date1: '2016-05-02',
	          date2: '2016-05-02',
	          day: 2,
	          situation:'不批'
	        },
	        {
	          name: '王小虎',
	          date1: '2016-05-02',
	          date2: '2016-05-02',
	          day: 2,
	          situation:'不批'
	        },
	        {
	          name: '王小虎',
	          date1: '2016-05-02',
	          date2: '2016-05-02',
	          day: 2,
	          situation:'已批'
	        }
        ],
        currentPage3: 5
      };
    },
    methods: {
       handleEdit(index, row) {
        console.log(index, row.situation);
//      console.log(data.tableData2.situation)
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  };
</script>

<style>
.auditing{
	width: 100%;
}
.auActive{
	background: #FAF0E6 !important;
}
#box .boxUl li{
	width: 100px;
	height: 30px;
	text-align: center;
	list-style: none;
	display: inline-block;
	/*border: 2px solid lightcoral;*/
	margin: 20px;
	background: white;
	padding: 5px 0 0 0 ;
	box-shadow:2px 2px 1px rgba(0,0,0,0.1);
	border-radius: 3px;
}
.history{
	width: 100%;
}
#box .el-pagination{
	padding: 18px 10px;
}
#box .el-table td.is-right{
	text-align: center;
}
</style>